<!--
 * @Author: your name
 * @Date: 2022-02-22 09:14:45
 * @LastEditTime: 2022-02-22 10:30:42
 * @LastEditors: Please set LastEditors
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: \briup-study\day02\表单。html
-->

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表单</title>
</head>
<body>
   <form action="hest.html">
       <!-- placeholder:提示 -->
       用户名：<input type="text" name="accout" placeholder="请输入用户名" ><br>
       密码：<input type="password"  name="password" placeholder="请输入密码"><br>
       性别：
       <br>
       <!--1.默认情况下单选框不会互斥, 要想单选框互斥那么必须给每一个单选框标签都设置一个name属性, 然后name属性还必须设置相同的值。
	  2.单选框的value值，才是我们最终提交给后台的值需要的值，并不是单选框显示的值。      -->
       <label for="man">
      男<input id="man" type="radio" name="gender" value="male">
    </label>

       女<input type="radio" name="gender" value="female">
<br>
水果：
      香蕉 <input type="checkbox" name="fruit"  value="banana">
       水果<input type="checkbox" name="fruit" value="apple">
       
      橘子 <input type="checkbox" name="fruit"  value="orange">

      <!-- 文件上传 -->
      <input type="file" name="文件上传" id="">
      <!-- 普通按钮 配合js完成操作-->
      <input type="button" value="普通按钮" id="btn">
      <!-- 重置按钮可以清空表单中填写的表单元素的值 -->
      <input type="reset" value="重置按钮">
       <input type="submit" value="提交">
       <!-- 隐藏域  悄悄地默默的提交给服务器一些数据-->
       <input type="hidden" name="token" value="65861asfdafsdsfdafsdf">
       <br>

      
   </form>
   
   <form action="">
    <select name="city" id="">
     <optgroup label="一线城市">
        <option value="shanghai">上海</option>
        <option value="hangzhou">杭州</option>
        <option value="suzhou" selected>苏州</option>
     </optgroup>
     <!-- disable表示禁用我们的下拉列表 -->
     <optgroup label="二线城市" disabled>
        <option value="chongqing ">重庆</option>
        <option value="anxi ">西安</option>
        <option value="taiyuan " selected>太原</option>
     </optgroup>
    </select>
<input type="submit" value="提交按钮">
<br>
    <textarea name="des" id="" cols="30" rows="10"></textarea>

    <fieldset>
        <legend>请登录</legend>
        用户名：<input type="text" name="" id="">
        密码：<input type="password" name="" id="">
    </fieldset>

    <!-- 给输入框绑定待选项 -->
    <input type="text" list="fruit">
    <datalist id="fruit">
        <option value="apple">苹果</option>
        <option value="banana">香蕉</option>
        <option value="apple">火龙果</option>
        <option value="">龙眼</option>
        <option value=""></option>
    </datalist>

    <progress value="50" max="100">50%</progress>

    <input type="url" name="url">
    <input type="number" name="num">
    <input type="date" name="date" >
    <input type="color" name="color">
   </form>
</body>
<script>
    //js的点击事件 event事件对象本身 形参
    btn.onclick=function(event){
        console.log(even)
        event.value='我变变变'

    }
</script>
</html>